<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="关键词回复" name="first">
                <template v-cloak v-if="activeName === 'first'">
                    <div class="filter-container">
                        <el-input v-model="queryKey.name" class="filter-item w-200" size="medium" placeholder="规则名称"></el-input>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchKeyList(resetPage = true)" v-permission="'wechat-messages.index'">搜索</el-button>
                        <el-button class="filter-item" type="primary" size="medium" @click="addRule" v-permission="'wechat-messages.store'">新增</el-button>
                    </div>
                    <el-table
                            :data="messages"
                            v-loading="loading1 || fullscreenLoading"
                            border
                            style="width: 100%">
                        <el-table-column
                                width="50px"
                                align="center"
                                label="#">
                            <template slot-scope="scope" >
                                {{scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="name"
                                label="规则名称">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="key"
                                label="关键字">
                        </el-table-column>
                        <el-table-column label="回复消息类型" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.message_type===1">文本</span>
                                <span v-if="scope.row.message_type===2">图片</span>
                                <span v-if="scope.row.message_type===3">图文</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="count"
                                label="触发次数">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="created_at"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="updated_at"
                                label="启用时间">
                        </el-table-column>
                        <el-table-column prop="is_enable" align="center" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.is_enable===1">启用</span>
                                <span v-if="scope.row.is_enable===0">停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button class="filter-item" type="primary" size="medium" @click="editRule(scope.row)" v-permission="'wechat-messages.update'">编辑</el-button>
                                <el-button class="filter-item" type="danger" size="medium" @click="delRule(scope.row.id)" v-permission="'wechat-messages.destroy'">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleKeySizeChange"
                                @current-change="handleKeyCurrentChange"
                                :current-page="queryKey.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryKey.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalKey">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane label="收到消息回复" name="second">
                <template v-cloak v-if="activeName === 'second'">
                    <div class="filter-container">
                        <el-input v-model="queryReceive.name" class="filter-item w-200" size="medium" placeholder="规则名称"></el-input>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchReceiveList(resetPage = true)" v-permission="'wechat-messages.index'">搜索</el-button>
                        <el-button class="filter-item" type="primary" size="medium" @click="addReceive" v-permission="'wechat-messages.store'">新增</el-button>
                    </div>
                    <el-table
                            :data="receiveMessages"
                            border
                            v-loading="loading2 || fullscreenLoading"
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                width="50px"
                                label="#">
                            <template slot-scope="scope" >
                                {{scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="name"
                                label="规则名称">
                        </el-table-column>
                        <el-table-column align="center" label="回复消息类型">
                            <template slot-scope="scope">
                                <span v-if="parseInt(scope.row.message_type)===1">文本</span>
                                <span v-if="parseInt(scope.row.message_type)===2">图片</span>
                                <span v-if="parseInt(scope.row.message_type)===3">图文</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="count"
                                label="触发次数">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="created_at"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="updated_at"
                                label="启用时间">
                        </el-table-column>
                        <el-table-column prop="is_enable" align="center" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.is_enable===1">启用</span>
                                <span v-if="scope.row.is_enable===0">停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button class="filter-item" type="primary" size="medium" @click="editReceive(scope.row)" v-permission="'wechat-messages.update'">编辑</el-button>
                                <el-button class="filter-item" type="danger" size="medium" @click="delRule(scope.row.id)" v-permission="'wechat-messages.destroy'">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleReceiveSizeChange"
                                @current-change="handleReceiveCurrentChange"
                                :current-page="queryReceive.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="queryReceive.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalReceive">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane label="被关注回复" name="third">
                <template v-cloak v-if="activeName === 'third'">
                    <div class="filter-container">
                        <el-input v-model="querySubscribe.name" class="filter-item w-200" size="medium" placeholder="规则名称"></el-input>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchSubscribeList(resetPage = true)" v-permission="'wechat-messages.index'">搜索</el-button>
                        <el-button class="filter-item" type="primary" size="medium" @click="addSubscribe" v-permission="'wechat-messages.store'">新增</el-button>
                    </div>
                    <el-table
                            :data="subscribeMessages"
                            border
                            v-loading="loading3 || fullscreenLoading"
                            style="width: 100%">
                        <el-table-column
                                align="center"
                                width="50px"
                                label="#">
                            <template slot-scope="scope" >
                                {{scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="name"
                                label="规则名称">
                        </el-table-column>
                        <el-table-column label="回复消息类型" align="center">
                            <template slot-scope="scope">
                                <span v-if="parseInt(scope.row.message_type)===1">文本</span>
                                <span v-if="parseInt(scope.row.message_type)===2">图片</span>
                                <span v-if="parseInt(scope.row.message_type)===3">图文</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="count"
                                label="触发次数">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="created_at"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="updated_at"
                                label="启用时间">
                        </el-table-column>
                        <el-table-column prop="is_enable" label="状态" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.is_enable===1">启用</span>
                                <span v-if="scope.row.is_enable===0">停用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button class="filter-item" type="primary" size="medium" @click="editSubscribe(scope.row)" v-permission="'wechat-messages.update'">编辑</el-button>
                                <el-button class="filter-item" type="danger" size="medium" @click="delRule(scope.row.id)" v-permission="'wechat-messages.destroy'">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleSubscribeSizeChange"
                                @current-change="handleSubscribeCurrentChange"
                                :current-page="querySubscribe.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="querySubscribe.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalSubscribe">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
        <el-dialog
                width="500px"
                :visible.sync="dialogVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="关键字" prop="key">
                    <el-input v-model="ruleForm.key"></el-input>
                </el-form-item>
                <el-form-item label="优先级">
                    <el-input-number v-model="ruleForm.sort" :min="1" label="优先级"></el-input-number>
                </el-form-item>
                <el-form-item label="回复消息类型" prop="message_type">
                    <el-select v-model="ruleForm.message_type" placeholder="请选择回复消息类型" @change="changeMessageType">
                        <el-option label="文本" value="1"></el-option>
                        <el-option label="图片" value="2"></el-option>
                        <el-option label="图文" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启用或停用">
                    <el-switch
                            style="margin-top: 0px; margin-right: 10px"
                            v-model="ruleForm.is_enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="media_id" v-if="ruleForm.message_type==='2'" prop="image_id">
                    <el-input v-model="ruleForm.image_id"></el-input>
                </el-form-item>
                <el-form-item label="消息文字" v-if="ruleForm.message_type==='1' || ruleForm.message_type==='3'" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="描述" v-if="ruleForm.message_type==='3'" prop="description">
                    <el-input v-model="ruleForm.description"></el-input>
                </el-form-item>
                <el-form-item label="图片链接" v-if="ruleForm.message_type==='3'" prop="image_url">
                    <el-input v-model="ruleForm.image_url"></el-input>
                </el-form-item>
                <el-form-item label="链接" v-if="ruleForm.message_type==='3'" prop="url">
                    <el-input v-model="ruleForm.url"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitRuleForm">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog
                width="500px"
                :visible.sync="dialogVisible2">
            <el-form :model="receiveForm" :rules="rules" ref="receiveForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="receiveForm.name"></el-input>
                </el-form-item>
                <el-form-item label="优先级">
                    <el-input-number v-model="receiveForm.sort" :min="1" label="优先级"></el-input-number>
                </el-form-item>
                <el-form-item label="回复消息类型" prop="message_type">
                    <el-select v-model="receiveForm.message_type" placeholder="请选择回复消息类型" @change="changeReceiveType">
                        <el-option label="文本" value="1"></el-option>
                        <el-option label="图片" value="2"></el-option>
                        <el-option label="图文" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="media_id" v-if="receiveForm.message_type==='2'" prop="image_id">
                    <el-input v-model="receiveForm.image_id"></el-input>
                </el-form-item>
                <el-form-item label="消息文字" v-if="receiveForm.message_type==='1' || receiveForm.message_type==='3'" prop="title">
                    <el-input v-model="receiveForm.title"></el-input>
                </el-form-item>
                <el-form-item label="描述" v-if="receiveForm.message_type==='3'" prop="description">
                    <el-input v-model="receiveForm.description"></el-input>
                </el-form-item>
                <el-form-item label="图片链接" v-if="receiveForm.message_type==='3'" prop="image_url">
                    <el-input v-model="receiveForm.image_url"></el-input>
                </el-form-item>
                <el-form-item label="链接" v-if="receiveForm.message_type==='3'" prop="url">
                    <el-input v-model="receiveForm.url"></el-input>
                </el-form-item>
                <el-form-item label="启用或停用">
                    <el-switch
                            style="margin-top: 0px; margin-right: 10px"
                            v-model="receiveForm.is_enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="submitReceiveForm">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog
                width="500px"
                :visible.sync="dialogVisible3">
            <el-form :model="subscribeForm" :rules="rules" ref="subscribeForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="subscribeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="优先级">
                    <el-input-number v-model="subscribeForm.sort" :min="1" label="优先级"></el-input-number>
                </el-form-item>
                <el-form-item label="回复消息类型" prop="message_type">
                    <el-select v-model="subscribeForm.message_type" placeholder="请选择回复消息类型" @change="changeSubscribeType">
                        <el-option label="文本" value="1"></el-option>
                        <el-option label="图片" value="2"></el-option>
                        <el-option label="图文" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="media_id" v-if="subscribeForm.message_type==='2'" prop="image_id">
                    <el-input v-model="subscribeForm.image_id"></el-input>
                </el-form-item>
                <el-form-item label="消息文字" v-if="subscribeForm.message_type==='1' || subscribeForm.message_type==='3'" prop="title">
                    <el-input v-model="subscribeForm.title"></el-input>
                </el-form-item>
                <el-form-item label="描述" v-if="subscribeForm.message_type==='3'" prop="description">
                    <el-input v-model="subscribeForm.description"></el-input>
                </el-form-item>
                <el-form-item label="图片链接" v-if="subscribeForm.message_type==='3'" prop="image_url">
                    <el-input v-model="subscribeForm.image_url"></el-input>
                </el-form-item>
                <el-form-item label="链接" v-if="subscribeForm.message_type==='3'" prop="url">
                    <el-input v-model="subscribeForm.url"></el-input>
                </el-form-item>
                <el-form-item label="启用或停用">
                    <el-switch
                            style="margin-top: 0px; margin-right: 10px"
                            v-model="subscribeForm.is_enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="submitSubscribeForm">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { wechatMessages, addMessageRule, updateWechatMessage, delMessageRule } from '@/api/wechat'
    export default {
      name: 'message',
      data() {
        return {
          fullscreenLoading: false,
          loading1: true,
          loading2: true,
          loading3: true,
          totalKey: 0,
          totalReceive: 0,
          totalSubscribe: 0,
          queryKey: {
            name: '',
            type: 1,
            page: 1,
            size: 10
          },
          queryReceive: {
            name: '',
            type: 2,
            page: 1,
            size: 10
          },
          querySubscribe: {
            name: '',
            type: 3,
            page: 1,
            size: 10
          },
          option: '',
          activeName: 'first',
          dialogVisible: false,
          dialogVisible2: false,
          dialogVisible3: false,
          messages: [],
          receiveMessages: [],
          subscribeMessages: [],
          subscribeForm: {
            id: '',
            name: '',
            type: 3,
            message_type: '',
            title: '',
            description: '',
            image_id: '',
            image_url: '',
            url: '',
            is_enable: '',
            sort: ''
          },
          receiveForm: {
            id: '',
            name: '',
            type: 2,
            message_type: '',
            title: '',
            description: '',
            image_id: '',
            image_url: '',
            url: '',
            is_enable: '',
            sort: ''
          },
          ruleForm: {
            id: '',
            name: '',
            key: '',
            type: '',
            message_type: '',
            title: '',
            description: '',
            image_id: '',
            image_url: '',
            url: '',
            is_enable: '',
            sort: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入规则名称', trigger: 'blur' },
              { min: 2, max: 20, message: '输入的规则名称长度在2 ~ 20个字符之间' }
            ],
            key: [
              { required: true, message: '请输入关键字', trigger: 'blur' }
            ],
            message_type: [
              { required: true, message: '请选择消息回复类型', trigger: 'change' }
            ],
            title: [
              { required: true, message: '请输入要回复的文本信息', trigger: 'blur' }
            ],
            description: [
              { required: true, message: '请输入要回复的图文描述', trigger: 'blur' }
            ],
            image_id: [
              { required: true, message: '请填写素材media_id', trigger: 'blur' }
            ],
            image_url: [
              { required: true, message: '请填写图片链接', trigger: 'blur' },
              { type: 'url', message: '请填写正确格式的图片链接', trigger: 'blur' }
            ],
            url: [
              { required: true, message: '请填写链接', trigger: 'blur' },
              { type: 'url', message: '请填写正确格式的链接', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        // 重置表单验证
        resetForm(formName) {
          // 第一次新增数据时为空对象undefined
          if (this.$refs[formName] !== undefined) {
            this.$refs[formName].resetFields()
          }
        },
        handleKeySizeChange(size) {
          this.queryKey.size = size
          this.fetchKeyList()
        },
        handleKeyCurrentChange(page) {
          this.queryKey.page = page
          this.fetchKeyList()
        },
        handleReceiveSizeChange(size) {
          this.queryKey.size = size
          this.fetchReceiveList()
        },
        handleReceiveCurrentChange(page) {
          this.queryKey.page = page
          this.fetchReceiveList()
        },
        handleSubscribeSizeChange(size) {
          this.queryKey.size = size
          this.fetchSubscribeList()
        },
        handleSubscribeCurrentChange(page) {
          this.queryKey.page = page
          this.fetchSubscribeList()
        },
        handleClick(tab, event) {
          this.fullscreenLoading = true
          setTimeout(() => {
            this.fullscreenLoading = false
          }, 400)
        },
        // 获取关键字规则列表
        fetchKeyList(resetPage = false) {
          this.loading1 = true
          if (resetPage) {
            this.queryKey.page = 1
          }
          wechatMessages(this.queryKey).then(res => {
            this.totalKey = res.meta.total
            this.messages = res.data
            this.loading1 = false
          })
        },
        // 获取收到消息回复规则列表
        fetchReceiveList(resetPage = false) {
          this.loading2 = true
          if (resetPage) {
            this.queryReceive.page = 1
          }
          wechatMessages(this.queryReceive).then(res => {
            this.totalReceive = res.meta.total
            this.receiveMessages = res.data
            this.loading2 = false
          })
        },
        // 获取被关注回复规则列表
        fetchSubscribeList(resetPage = false) {
          this.loading3 = true
          if (resetPage) {
            this.querySubscribe.page = 1
          }
          wechatMessages(this.querySubscribe).then(res => {
            this.totalSubscribe = res.meta.total
            this.subscribeMessages = res.data
            this.loading3 = false
          })
        },
        // 改变回复的消息类型
        changeMessageType() {
          this.ruleForm.image_id = ''
          this.ruleForm.title = ''
          this.ruleForm.description = ''
          this.ruleForm.image_url = ''
          this.ruleForm.url = ''
          if (this.$refs['ruleForm'] !== undefined) {
            this.$refs['ruleForm'].clearValidate()
          }
        },
        changeReceiveType() {
          this.receiveForm.image_id = ''
          this.receiveForm.title = ''
          this.receiveForm.description = ''
          this.receiveForm.image_url = ''
          this.receiveForm.url = ''
          if (this.$refs['receiveForm'] !== undefined) {
            this.$refs['receiveForm'].clearValidate()
          }
        },
        changeSubscribeType() {
          this.subscribeForm.image_id = ''
          this.subscribeForm.title = ''
          this.subscribeForm.description = ''
          this.subscribeForm.image_url = ''
          this.subscribeForm.url = ''
          if (this.$refs['subscribeForm'] !== undefined) {
            this.$refs['subscribeForm'].clearValidate()
          }
        },
        // 添加规则
        addRule() {
          this.resetForm('ruleForm')
          this.option = 'add'
          this.dialogVisible = true
          Object.assign(this.ruleForm, this.$options.data().ruleForm)
        },
        // 添加收到消息规则
        addReceive() {
          this.resetForm('receiveForm')
          this.option = 'add'
          this.dialogVisible2 = true
          Object.assign(this.receiveForm, this.$options.data().receiveForm)
        },
        // 添加被关注规则
        addSubscribe() {
          this.resetForm('subscribeForm')
          this.option = 'add'
          this.dialogVisible3 = true
          Object.assign(this.subscribeForm, this.$options.data().subscribeForm)
        },
        // 编辑规则
        editRule(row) {
          if (this.$refs['ruleForm'] !== undefined) {
            this.$refs['ruleForm'].clearValidate()
          }
          Object.existAssign(this.ruleForm, row)
          this.ruleForm.message_type = this.ruleForm.message_type.toString()
          this.option = 'edit'
          this.dialogVisible = true
        },
        // 编辑收到消息规则
        editReceive(row) {
          if (this.$refs['receiveForm'] !== undefined) {
            this.$refs['receiveForm'].clearValidate()
          }
          Object.existAssign(this.receiveForm, row)
          this.receiveForm.message_type = this.receiveForm.message_type.toString()
          this.option = 'edit'
          this.dialogVisible2 = true
        },
        // 编辑被关注规则
        editSubscribe(row) {
          if (this.$refs['subscribeForm'] !== undefined) {
            this.$refs['subscribeForm'].clearValidate()
          }
          Object.existAssign(this.subscribeForm, row)
          this.subscribeForm.message_type = this.subscribeForm.message_type.toString()
          this.option = 'edit'
          this.dialogVisible3 = true
        },
        // 删除规则
        delRule(id) {
          this.$confirm('确定删除该规则?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delMessageRule(id).then(res => {
              this.$message.success('删除成功')
              this.fetchKeyList()
              this.fetchReceiveList()
              this.fetchSubscribeList()
            }).catch(err => {
              this.$handleNotFound(err, '该规则不存在')
            })
          }).catch(() => {})
        },
        // 提交规则表单
        submitRuleForm() {
          this.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              // 通过校验
              if (this.option === 'add') {
                this.ruleForm.type = 1
                addMessageRule(this.ruleForm).then(res => {
                  this.$message.success('新增成功')
                  this.fetchKeyList()
                  this.dialogVisible = false
                }).catch(err => {
                  this.$handleNotFound(err)
                })
              }
              if (this.option === 'edit') {
                updateWechatMessage(this.ruleForm, this.ruleForm.id).then(res => {
                  this.$message.success('修改成功')
                  this.fetchKeyList()
                  this.dialogVisible = false
                }).catch(err => {
                  this.$handleNotFound(err, '该规则不存在')
                })
              }
            }
          })
        },
        // 提交收到消息菜单
        submitReceiveForm() {
          this.$refs['receiveForm'].validate((valid) => {
            if (valid) {
              // 通过校验
              if (this.option === 'add') {
                this.receiveForm.type = 2
                addMessageRule(this.receiveForm).then(res => {
                  this.$message.success('添加成功')
                  this.fetchReceiveList()
                  this.dialogVisible2 = false
                }).catch(err => {
                  this.$handleNotFound(err)
                })
              }
              if (this.option === 'edit') {
                updateWechatMessage(this.receiveForm, this.receiveForm.id).then(res => {
                  this.$message.success('修改成功')
                  this.fetchReceiveList()
                  this.dialogVisible2 = false
                }).catch(err => {
                  this.$handleNotFound(err, '该规则不存在')
                })
              }
            }
          })
        },
        // 提交到被关注表单
        submitSubscribeForm() {
          this.$refs['subscribeForm'].validate((valid) => {
            if (valid) {
              // 通过校验
              if (this.option === 'add') {
                this.subscribeForm.type = 3
                addMessageRule(this.subscribeForm).then(res => {
                  this.$message.success('添加成功')
                  this.fetchSubscribeList()
                  this.dialogVisible3 = false
                }).catch(err => {
                  this.$handleNotFound(err)
                })
              }
              if (this.option === 'edit') {
                updateWechatMessage(this.subscribeForm, this.subscribeForm.id).then(res => {
                  this.$message.success('修改成功')
                  this.fetchSubscribeList()
                  this.dialogVisible3 = false
                }).catch(err => {
                  this.$handleNotFound(err, '该规则不存在')
                })
              }
            }
          })
        }
      },
      created() {
        this.fetchKeyList()
        this.fetchReceiveList()
        this.fetchSubscribeList()
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
